<template>
  <div class="permissions-container">
    <el-divider content-position="left">
      intelligence模式,前端根据permissions拦截路由(演示环境,默认使用此方案)
    </el-divider>
    <canvas id="loadingbar"></canvas>   
    <el-button @click="toImage">截图</el-button>
  </div>
</template>

<script>
import {
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted,
} from 'vue'
import ScreenShort from "js-web-screen-shot";
  export default {
    setup(props, { emit }) {
    const Interface = reactive({
      toImage(){
         setTimeout(()=>{
              const screenShotHandler = new ScreenShort({
              enableWebRtc: false,  //是否显示选项框
              level:99,  //层级级别
              completeCallback: Interface.callback
              //closeCallback: this.closeFn
          })},0)
      },
      /**
     * 根据图片生成画布
     */
    convertImageToCanvas(image) {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext("2d").drawImage(image, 0, 0);
      return canvas;
    },
     /**
     * 生成图片
     * 截图确认按钮回调函数
     */
    callback(base64data) {
        var image = new Image();
        image.src = base64data;
        image.onload = () => {
          var canvas = Interface.convertImageToCanvas(image);
          var url = canvas.toDataURL("image/jpeg");
          // 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
          state.uploadlist.push({image:url})
          for(var i=0;i<state.uploadlist.length;i++){
            if(state.uploadlist.length>=6){
              state.uploadhide=false;
            }
          }
          console.log(state.uploadlist,'push')
 
          var bytes = window.atob(url.split(",")[1]);  //通过atob将base64进行编码
          //处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
          var buffer = new ArrayBuffer(bytes.length);
          var uint = new Uint8Array(buffer);  //生成一个8位数的数组
          for (var i = 0; i < bytes.length; i++) {
            uint[i] = bytes.charCodeAt(i);  //根据长度返回相对应的Unicode 编码
          }
          //Blob对象
          var imageFile= new Blob([buffer], { type: "image/jpeg" }); //type为图片的格式
 
          // 给后台返回的数组，我的项目需求是要截图多张上传给后端的，如果只上传一张直接就上传imageFile上一句就行，这个数组可以跟根据自己的需求进行编写
          state.imageFilelist.push(imageFile);
          if (state.imageFilelist != "") {
           console.log('成功')
          }
      };  
    }
  })
    const state = reactive({
      uploadlist:[],
      imageFilelist:[],
    })
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      ...toRefs(Interface)
    }
  }
  }
</script>
